<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{$game.name}</title>


<link href="__GAME__/zhuan/css/style.css" rel="stylesheet" type="text/css">

<script type="text/javascript" src="__GAME__/zhuan/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="__GAME__/zhuan/js/awardRotate.js"></script>

<script type="text/javascript">
var turnplate={
    restaraunts:[],       //大转盘奖品名称
    colors:[],          //大转盘奖品区块对应背景颜色
    outsideRadius:192,      //大转盘外圆的半径
    textRadius:155,       //大转盘奖品位置距离圆心的距离
    insideRadius:68,      //大转盘内圆的半径
    startAngle:0,       //开始角度
    
    bRotate:false       //false:停止;ture:旋转
};

$(document).ready(function(){
  //动态添加大转盘的奖品与奖品区域背景颜色
  turnplate.restaraunts = ["{$game.gift1}", "{$game.gift2}", "{$game.gift3}", "{$game.gift4}", "{$game.gift5}", "{$game.gift6}"];
  turnplate.colors = ["#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF", "#FFF4D6", "#FFFFFF"];

  
  var rotateTimeOut = function (){
    $('#wheelcanvas').rotate({
      angle:0,
      animateTo:2160,
      duration:8000,
      callback:function (){
        alert('网络超时，请检查您的网络设置！');
      }
    });
  };

  //旋转转盘 item:奖品位置; txt：提示语;
  var rotateFn = function (item, txt){
    var angles = item * (360 / turnplate.restaraunts.length) - (360 / (turnplate.restaraunts.length*2));
    if(angles<270){
      angles = 270 - angles; 
    }else{
      angles = 360 - angles + 270;
    }
    $('#wheelcanvas').stopRotate();
    $('#wheelcanvas').rotate({
      angle:0,
      animateTo:angles+1800,
      duration:8000,
      callback:function (){
      
        //记录奖品
        ajaxGame('{$game.id}','{$member.openid}', item,'{$member.nickname}');
       
        turnplate.bRotate = !turnplate.bRotate;
      }
    });
  };

  $('.pointer').click(function (){
    if(turnplate.bRotate)return;
    turnplate.bRotate = !turnplate.bRotate;
    //获取随机数(奖品个数范围内)
    var item = rnd(3,turnplate.restaraunts.length);
    //奖品数量等于10,指针落在对应奖品区域的中心角度[252, 216, 180, 144, 108, 72, 36, 360, 324, 288]
    rotateFn(item, turnplate.restaraunts[item-1]);
   
    console.log(item);
  });
});

var ajaxGame = function(id,openid,gift_rank,nickname){
         
           $.ajax({
            type:"post",
            url:"{:U('News/index/ajaxGame')}",
            data:{id:id,openid:openid,gift_rank:gift_rank,nickname:nickname},
            dataType:"text",
            success:function(data){
              if(data){
              // var json = JSON.parse(data); //数组  
              // console.log(json);
              alert(data);
              }
               
            },
            async:false
          });
 };

function rnd(n, m){
  var random = Math.floor(Math.random()*(m-n+1)+n);
  return random;
  
}


//页面所有元素加载完毕后执行drawRouletteWheel()方法对转盘进行渲染
window.onload=function(){
  drawRouletteWheel();
};

function drawRouletteWheel() {    
  var canvas = document.getElementById("wheelcanvas");    
  if (canvas.getContext) {
    //根据奖品个数计算圆周角度
    var arc = Math.PI / (turnplate.restaraunts.length/2);
    var ctx = canvas.getContext("2d");
    //在给定矩形内清空一个矩形
    ctx.clearRect(0,0,422,422);
    //strokeStyle 属性设置或返回用于笔触的颜色、渐变或模式  
    ctx.strokeStyle = "#FFBE04";
    //font 属性设置或返回画布上文本内容的当前字体属性
    ctx.font = '16px Microsoft YaHei';      
    for(var i = 0; i < turnplate.restaraunts.length; i++) {       
      var angle = turnplate.startAngle + i * arc;
      ctx.fillStyle = turnplate.colors[i];
      ctx.beginPath();
      //arc(x,y,r,起始角,结束角,绘制方向) 方法创建弧/曲线（用于创建圆或部分圆）    
      ctx.arc(211, 211, turnplate.outsideRadius, angle, angle + arc, false);    
      ctx.arc(211, 211, turnplate.insideRadius, angle + arc, angle, true);
      ctx.stroke();  
      ctx.fill();
      //锁画布(为了保存之前的画布状态)
      ctx.save();   
      
      //----绘制奖品开始----
      ctx.fillStyle = "#E5302F";
      var text = turnplate.restaraunts[i];
      var line_height = 17;
      //translate方法重新映射画布上的 (0,0) 位置
      ctx.translate(211 + Math.cos(angle + arc / 2) * turnplate.textRadius, 211 + Math.sin(angle + arc / 2) * turnplate.textRadius);
      
      //rotate方法旋转当前的绘图
      ctx.rotate(angle + arc / 2 + Math.PI / 2);
      
      /** 下面代码根据奖品类型、奖品名称长度渲染不同效果，如字体、颜色、图片效果。(具体根据实际情况改变) **/
      if(text.indexOf("元")>0){   
        var texts = text.split("元");
        for(var j = 0; j<texts.length; j++){
          ctx.font = j == 0?'bold 20px Microsoft YaHei':'16px Microsoft YaHei';
          if(j == 0){
            ctx.fillText(texts[j]+"元", -ctx.measureText(texts[j]+"元").width / 2, j * line_height);
          }else{
            ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
          }
        }
      }else if(text.indexOf("元") == -1 && text.length>6){    //奖品名称长度超过一定范围 
        text = text.substring(0,6)+"||"+text.substring(6);
        var texts = text.split("||");
        for(var j = 0; j<texts.length; j++){
          ctx.fillText(texts[j], -ctx.measureText(texts[j]).width / 2, j * line_height);
        }
      }else{
        //在画布上绘制填色的文本。文本的默认颜色是黑色
        //measureText()方法返回包含一个对象，该对象包含以像素计的指定字体宽度
        ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
      }
      
      //添加对应图标
      if(text.indexOf("加")>0){
        var img= document.getElementById("shan-img");
        img.onload=function(){  
          ctx.drawImage(img,-15,10);      
        }; 
        ctx.drawImage(img,-15,10);  
      }else if(text.indexOf("谢谢参与")>=0){
        var img= document.getElementById("sorry-img");
        img.onload=function(){  
          ctx.drawImage(img,-15,10);      
        };  
        ctx.drawImage(img,-15,10);  
      }
      //把当前画布返回（调整）到上一个save()状态之前 
      ctx.restore();
      //----绘制奖品结束----
    }     
  } 
}

</script>
</head>
<body style="background:#e62d2d;overflow-x:hidden;">
<br>

<!-- 代码 开始 -->
<img src="__GAME__/zhuan/images/1.png" id="shan-img" style="display:none;" />
<img src="__GAME__/zhuan/images/2.png" id="sorry-img" style="display:none;" />
<div class="banner">
  <div class="turnplate" style="background-image:url(__GAME__/zhuan/images/turnplate-bg.png);background-size:100% 100%;">
    <canvas class="item" id="wheelcanvas" width="422px" height="422px"></canvas>
    <img class="pointer" src="__GAME__/zhuan/images/turnplate-pointer.png"/>
  </div>
</div>
<!-- 代码 结束 -->


<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</br></br>
<h2 ><a href="{:U('Wechat/index/mySpace',array('openid'=>$member['openid']))}" style='color:#FFFFFF'>点击这里查看奖品</a> </h2>

<p style='color:#FFFFFF'>本游戏每周{$open}开放，感谢关注</p>
<p style='color:#FFFFFF'>所有游戏奖品均当天有效</p>
<p style='color:#FFFFFF'>每桌仅限使用一份奖品</p>
<p style='color:#FFFFFF'>奖品兑换后其他游戏奖品随之失效</p>
</div>

</body>
</html>


 <?php if ($appid  and is_weixin()){   ?>
         
        <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"> </script>
        <script>
          wx.config({
              debug: false,
              appId: "<?php echo $myjssdk['appId']; ?>", // 必填，公众号的唯一标识
              timestamp: <?php echo $myjssdk['timestamp']; ?>, // 必填，生成签名的时间戳，切记时间戳是整数型，别加引号
              nonceStr: "<?php echo $myjssdk['nonceStr']; ?>", // 必填，生成签名的随机串
              signature: "<?php echo $myjssdk['signature']; ?>", // 必填，签名，见附录1
              jsApiList: [
                
                'onMenuShareTimeline',
                'onMenuShareAppMessage',
                'onMenuShareQQ',
                'onMenuShareWeibo'
               
              ]
          });


         wx.ready(function () {
          // alert("启动jsapi!");

           wx.onMenuShareAppMessage({
              title: "<?php echo $wx_show['title'];?>",
              desc: "<?php echo $wx_show['desc'];?>",
              link: "<?php echo $wx_show['link'];?>",
              imgUrl: "<?php echo $wx_show['imgUrl'];?>",
       
              success: function (res) {
                alert("真棒！你还可以分享到朋友圈哦");
              },
              cancel: function (res) {
                alert("亲，分享一下嘛，么么哒");
              }
     
          });

          wx.onMenuShareTimeline({
            title: "<?php echo $wx_show['title'];?>",
                  desc: "<?php echo $wx_show['desc'];?>",
                  link: "<?php echo $wx_show['link'];?>",
                  imgUrl: "<?php echo $wx_show['imgUrl'];?>",
           
                  success: function (res) {
                    alert("真棒！你还可以分享到朋友圈哦");
                  },
                  cancel: function (res) {
                    alert("亲，分享一下嘛，么么哒");
                  }
           });

           wx.onMenuShareQQ({
            title: "<?php echo $wx_show['title'];?>",
                  desc: "<?php echo $wx_show['desc'];?>",
                  link: "<?php echo $wx_show['link'];?>",
                  imgUrl: "<?php echo $wx_show['imgUrl'];?>",
           
                  success: function (res) {
                    alert("真棒！你还可以分享到朋友圈哦");
                  },
                  cancel: function (res) {
                    alert("亲，分享一下嘛，么么哒");
                  }
           });

           wx.onMenuShareWeibo({
            title: "<?php echo $wx_show['title'];?>",
                  desc: "<?php echo $wx_show['desc'];?>",
                  link: "<?php echo $wx_show['link'];?>",
                  imgUrl: "<?php echo $wx_show['imgUrl'];?>",
           
                  success: function (res) {
                    alert("真棒！你还可以分享到朋友圈哦");
                  },
                  cancel: function (res) {
                    alert("亲，分享一下嘛，么么哒");
                  }
           });

         });

        

       

        wx.error(function (res) {
          alert(res.errMsg);
        });
        </script>
        <?php  } ?>


